<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="title-nav">
                <div class="title-tab" :class="tabIndex === 0?'active':''" @click="tapTab(0)">共享题库</div>
                <div class="title-tab" :class="tabIndex === 1?'active':''" @click="tapTab(1)">我的题库</div>
            </div>
            <div class="search" slot="right">
                <i class="iconfont icon-magnifier"></i>
            </div>
        </nav-bar>
        <transition-group :name="transitionName" tag="div">
            <div class="bank-wrap" v-show="tabIndex === 0" :key="1">
                <cube-scroll ref="scroll">
                    <div class="lesson-wrap">
                        <div class="lesson-item" v-for="lesson in lessonList" :key="lesson.id" @click="toQuestionSet(lesson.ls_name,lesson.id)">
                            <img :src="lesson.Img">
                            <span>{{lesson.ls_name}}</span>
                        </div>
                    </div>
                    <div class="top-wrap">
                        <div class="title">
                            <div class="text">题库榜单</div>
                            <div class="more">更多<i class="cubeic-arrow"></i></div>
                        </div>
                        <div class="container">
                            <div @click="toQuestionDetail(index)" class="item" v-for="(questionPackage,index) in questionPackageList" v-if="index<3" :key="index">
                                <img :src="questionPackage.Img">
                                <div class="name">{{questionPackage.ExamName}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="appropriate-wrap">
                        <div class="title">
                            <div class="text">适合我的题库</div>
                        </div>
                        <div class="no-data">暂无适合您的题库~</div>
                    </div>
                </cube-scroll>
            </div>
            <div class="list-wrap" v-show="tabIndex === 1" :key="2">
                <list-cell class="list-item" :showLeftSlot="true" :showBorder="false">
                    <div class="list-title ellipsis" slot="leftSlot">
                        <i class="iconfont icon-sifakaoshi"></i>
                        已购买的题库
                    </div>
                </list-cell>
                <list-cell @click="navigateToPage('myErrors')" class="list-item ellipsis" :showLeftSlot="true" :showBorder="false">
                    <div class="list-title" slot="leftSlot">
                        <i class="iconfont icon-cuotiku"></i>
                        错题集
                    </div>
                </list-cell>
                <list-cell @click="navigateToPage('myCollectQuestion')" class="list-item" :showLeftSlot="true" :showBorder="false">
                    <div class="list-title ellipsis" slot="leftSlot">
                        <i class="iconfont icon-shoucangjia"></i>
                        我的收藏
                    </div>
                </list-cell>
            </div>
        </transition-group>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, ListCell
        }
    })
    export default class QuestionBank extends Scene {
        private tabIndex: number = 0;
        private lessonList: Array<object> = [];
        private questionPackageList: Array<object> = [];
        private transitionName: string = "slide-right";

        @State("UserStore")
        private user!: InterfaceUser;


        private back() {
            this.navigateBack();
        }

        private mounted(): void {
            Http.get(this.api.getLessonList, CommonUnit.argumentWithUser(this.user)).then((res) => {
                this.lessonList = res.Data;
            });
            Http.get(this.api.questionPackageList, {price: 0}).then((res) => {
                this.questionPackageList = res.Data;
            });
        }

        private toQuestionDetail(index: number) {
            this.navigateTo({
                name: "questionDetail",
                query: {
                    packageId: (<any> this).questionPackageList[index].Id,
                    type: 1
                }
            });
        }

        private tapTab(n: number): void {
            if (n < this.tabIndex) {
                this.transitionName = "slide-right";
            } else {
                this.transitionName = "slide-left";
            }
            this.tabIndex = n;
        }

        private toQuestionSet(lessonName: string, id: string) {
            this.navigateTo({
                name: "questionSet",
                query: {lessonName: lessonName, id: id}
            });
        }

        private navigateToPage(pageName: string): void {
            this.navigateTo({
                name: pageName
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;

    .title-nav
        height 34px;
        width 220px;
        background rgba(255, 255, 255, .5);
        margin-top 5px;
        border-radius 5px;
        font-size 13px;
        display flex;
        justify-content center;

        .title-tab
            flex 1
            text-align center;
            line-height 34px;

        .active
            background #fff;
            color $theme-contrast-color;
            border-radius 5px;

    .bank-wrap, .list-wrap
        padding-top calc(44px +  env(safe-area-inset-top));
        padding-bottom env(safe-area-inset-bottom)
        height 100vh;

    .lesson-wrap
        display flex;
        justify-content flex-start;
        background #fff;
        padding 10px 15px;
        margin-top 10px;
        text-align center;
        flex-wrap wrap;
        padding-bottom 0;

        .lesson-item
            display inline-block;
            width 25%;
            margin-bottom 12px;

            img
                width 50px;
                height 50px;
                display block;
                margin auto;

            span
                font-size 13px;
                padding-top 7px;
                display block;
                text-align center;

    .top-wrap, .appropriate-wrap
        margin-top 10px;
        background #fff;
        padding 0 10px 10px 10px;

        .title
            height 36px;
            line-height 36px;
            display flex;
            justify-content space-between;

            .text, .more
                font-size 13px;

        .container
            display flex;
            justify-content: space-around;
            font-size 13px;
            height auto;

            .item
                background #f2f2f2;
                border-radius 7px;
                width 110px;
                padding 15px 10px;
                box-sizing border-box;
                height 150px;

                img
                    display block;
                    width 90px;
                    height 90px;

                .name
                    margin-top 6px;
                    color $theme-auxiliary-color;
                    font-size 12px;
                    line-height 16px;
                    text-align center;
                    overflow hidden;

    .list-item
        margin-top 10px;

        .list-title
            display flex;
            height 24px;
            align-items center;
            flex-direction row;
            font-size 14px;

            i.iconfont
                font-size 22px;
                display block;
                width 24px;
                text-align left;
                padding-right 10px;
                color $theme-common-color
</style>
